<template>
  <div>
    <div class="iconbox">
      <span class="iconfont icon-xiaoxitongzhi" @click="$router.push('/message')"></span>
    </div>
    <div class="mytop">
      <div class="myimg"></div>
      <div class="userbox">
        <p class="username">甜小杳</p>
        <p class="leave">LV.1</p>
      </div>
    </div>

    <div class="balance">
      <div class="balancebox">
        <p class="balan">余额</p>
        <p class="redbag">充值送红包</p>
        <p class="many" @click="cz">充值</p>
      </div>
      <div class="balancebox">
        <p class="balan">签到</p>
        <p class="redbag">做任务领红包</p>
        <p class="many1" @click="qd">签到</p>
      </div>
    </div>

    <div class="ulbox">
      <ul>
        <li @click="$router.push('/note')">
          <span class="iconfont icon-zuojia-01"></span>
          <span>笔记</span>
          <span class="iconfont icon-youjiantou"></span>
        </li>
        <li @click="$router.push('/upload')">
          <span class="iconfont icon-shangchuan"></span>
          <span>已购和上传</span>
          <span class="iconfont icon-youjiantou"></span>
        </li>
        <li @click="toast">
          <span class="iconfont icon-kefu"></span>
          <span>在线客服</span>
          <span class="iconfont icon-youjiantou"></span>
        </li>
        <!-- <li>
          <span class="iconfont icon-yejianmoshishenyemoshiyueliang"></span>
          <span>夜间模式</span>
          <van-switch v-model="checked" size="20px" class="vswitch"/>
        </li> -->
        <li @click="$router.push('/integral')">
          <span class="iconfont icon-icon-test"></span>
          <span>积分商城</span>
          <span class="iconfont icon-youjiantou"></span>
        </li>
        <li>
          <span class="iconfont icon-shezhi"></span>
          <span>设置</span>
          <span class="iconfont icon-youjiantou"></span>
        </li>
      </ul>
    </div>

    <!-- 底部组件 -->
    <buttom-nav></buttom-nav>
  </div>
</template>

<script>
import {Toast} from "vant"
import buttomNav from "../components/base/buttomNav.vue";

export default {
  data(){
    return {
      checked: false,
    }
  },
  methods:{
    toast(){
      Toast('请尽请期待');
    },
    qd(){
      Toast('签到成功');
    },
    cz(){
      Toast('充值成功');
    }
  },
  components: {
    buttomNav,
  },
};
</script>

<style lang="less">
.iconbox {
  width: 100%;
  height: 30px;
  display: block;
  .icon-xiaoxitongzhi {
    font-size: 30px;
    // display: inline-block;
    float: right;
    margin-right: 10px;
    margin-top: 10px;
  }
}
.mytop {
  // border: 1px solid black;
  display: flex;
  .myimg {
    width: 100px;
    height: 100px;
    // border: 1px solid black;
    border-radius: 50%;
    background-image: url(../assets/userimg.jpg);
    background-size: cover;
    margin-left: 15px;
  }
  .userbox {
    margin-left: 20px;
    .username {
      font-size: 25px;
      font-weight: bold;
      margin-top: 15px;
    }
    .leave {
      width: 35px;
      height: 23px;
      line-height: 23px;
      text-align: center;
      margin-top: 10px;
      font-size: 13px;
      border-radius: 20px;
      color: #707070;
      background-color: #e6e6e6;
    }
  }
}
.balance {
  // border: 1px solid black;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  border-bottom: 1px solid #f3f3f3;
  // box-shadow: 1px 1px 5px 0px #888888;
  padding-bottom: 6px;
  .balancebox {
    width: 185px;
    // border: 1px solid black;
    border-right: 1px solid #f3f3f3;
    text-align: center;
    padding-bottom: 5px;
    .balan {
      font-size: 18px;
      font-weight: bold;
    }
    .redbag {
      font-size: 13px;
      color: #707070;
      margin-top: 5px;
    }
    .many {
      width: 60px;
      height: 30px;
      line-height: 32px;
      font-size: 16px;
      background-color: #e64d2e;
      border-radius: 25px;
      margin-top: 10px;
      margin-left: 65px;
      color: white;
    }
    .many1 {
      width: 60px;
      height: 30px;
      line-height: 32px;
      font-size: 16px;
      border: 1px solid #e64d2e;
      // background-color: #e64d2e;
      border-radius: 25px;
      margin-top: 10px;
      margin-left: 65px;
      color: #e64d2e;
    }
  }
  .balancebox:last-child {
    border-right: none;
  }
}
.ulbox {
  // border: 1px solid black;
  margin-top: 20px;
  ul {
    li {
      height: 50px;
      // border: 1px solid black;
      line-height: 50px;
      color: #525252;
      // margin-left: 10px;
      .iconfont {
        font-size: 25px;
        margin-left: 10px;
      }
      span:nth-child(2) {
        margin-left: 15px;
      }
      .icon-youjiantou{
        font-size: 15px;
        float: right;
        margin-right: 20px;
        // margin-left: -20px;
      }
      .vswitch{
        // margin-left: 50px;
        float: right;
        margin-top: 17px;
        margin-right: 10px;
      }
    }
  }
}
</style>